<!DOCTYPE html>
<html lang="en" style="font-size: 14px;">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title></title>

    <!-- <script src = "./static/js/polyfill.min.js"></script>
    <script src="./static/js/jquery.min.js"></script>
    <link href="./static/css/animate.min.css" rel="stylesheet">
    <script src="./static/js/handlebars.min.js"></script>
    <link href="./static/css/reset.css" rel="stylesheet">

    <script src="./static/js/jquery.i18n.properties-1.0.9.js"></script> -->

    <link href="./static/css/bootstrap.min.css" rel="stylesheet">
    <link href="./static/css/paper-bootstrap-wizard.css" rel="stylesheet">
    <link href="./static/css/css" rel="stylesheet">
    <link href="./static/css/font-awesome.css" rel="stylesheet">
    <link href="./static/css/themify-icons.css" rel="stylesheet">

    <script src="./static/js/jquery.min.js"></script>
    <script src="./static/js/bootstrap.min.js"></script>
    <script src="./static/js/jquery.bootstrap.wizard.js"></script>
    <script src="./static/js/paper-bootstrap-wizard.js"></script>
    <script src="./static/js/jquery.validate.min.js"></script>
    
    <script src="./static/js/handlebars.min.js"></script>
    <script src = "./static/js/polyfill.min.js"></script>
    <script src="./static/js/jquery.i18n.properties-1.0.9.js"></script>
</head>

<body>
    <div id="app" class="animated fadeIn">
        <header id="header"></header>
        <main id="main" class="index_main" style="padding: 0 0 0 0;">
          <div class="banner" style="background: url('./static/img/zqxx_bg.jpg') no-repeat center center;background-size: cover;">
            <div class="container">
              <div class="row">
                <div class="col-sm-8 col-sm-offset-2">
                  <!--      Wizard container        -->
                  <div class="wizard-container">
                    <div class="card wizard-card" data-color="green" id="wizard">
                      <form action="" method="GET" onsubmit="return validate()" id="pay_form">
                        <div class="wizard-header">
                          <h3 class="wizard-title string_title">充值中心</h3>
                          <p class="category string_title_tip">你可以选择任意充值，在你登录之后</p>
                        </div>
                        <div class="wizard-navigation">
                          <div class="progress-with-circle">
                            <div class="progress-bar" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="4" style="width: 12.5%;"></div>
                          </div>
                          <ul class="nav nav-pills">
                            <li class="active" style="width: 25%;">
                              <a href="#user" data-toggle="tab" aria-expanded="true">
                                <div class="icon-circle checked">
                                  <i class="ti-map"></i>
                                </div>
                                <p class="category string_nav_user_title">用户信息</p>
                              </a>
                            </li>
                            <li class="" style="width: 25%;">
                              <a href="#role" data-toggle="tab" aria-expanded="false">
                                <div class="icon-circle checked">
                                  <i class="ti-direction-alt"></i>
                                </div>
                                <p class="category string_nav_role_title">角色信息</p>
                              </a>
                            </li>
                            <li class="" style="width: 25%;">
                              <a href="#rechargeAmount" data-toggle="tab" aria-expanded="false">
                                <div class="icon-circle checked">
                                  <i class="ti-comments"></i>
                                </div>
                                <p class="category string_nav_recharge_title">充值档位</p>
                              </a>
                            </li>
                            <!-- <li class="" style="width: 25%;">
                              <a href="#rechargeType" data-toggle="tab" aria-expanded="false">
                                <div class="icon-circle checked">
                                  <i class="ti-panel"></i>
                                </div>
                                <p class="category string_nav_recharge_type_title">充值方式</p>
                              </a>
                            </li> -->
                          </ul>
                        </div>
                        <div class="tab-content">
                          <div class="tab-pane active" id="user">
                            <div class="row">
                              <div class="col-sm-12">
                                <h5 class="info-text string_nav_user_title">用户信息</h5>
                              </div>
                              <div class="col-sm-5 col-sm-offset-1">
                                <div class="form-group">
                                  <label class="string_bind_fb_user">是否绑定Facebook</label>
                                  <div class="btn-group" data-toggle="buttons">
                                    <input type="radio" name="fboptions" id="bind_fb" disabled> <span class="string_bind">已绑定</span>
                                    <input type="radio" name="fboptions" id="no_bind_fb" disabled checked> <span class="string_no_bind">未绑定</span>
                                 </div>
                                  <input disabled type="text" class="form-control" id="facebook_username">
                                </div>
                              </div>
                              <div class="col-sm-5 col-sm-offset-1">
                                <div class="form-group">
                                  <label class="string_bind_gg_user">是否绑定Google</label>
                                  <div class="btn-group" data-toggle="buttons">
                                    <input type="radio" name="ggoptions" id="bind_gg" disabled> <span class="string_bind">已绑定</span>
                                    <input type="radio" name="ggoptions" id="no_bind_gg" disabled checked> <span class="string_no_bind">未绑定</span>
                                 </div>
                                  <input disabled type="text" class="form-control" id="google_username">
                                </div>
                              </div>
                              <div class="col-sm-5 col-sm-offset-1">
                                <div class="form-group">
                                  <label class="string_username">用户名</label>
                                  <input disabled type="text" class="form-control" id="username">
                                </div>
                              </div>
                              <div class="col-sm-5 col-sm-offset-1">
                                <div class="form-group">
                                  <label class="string_userId">用户ID</label>
                                  <input disabled type="text" class="form-control" id="userId">
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="tab-pane" id="role">
                            <h5 class="info-text string_nav_user_title">角色信息</h5>
                            <div class="row">
                              <div class="col-sm-11 col-sm-offset-1">
                                <div class="form-group">
                                    <label class="string_role_platform">平台</label>
                                    <select class="form-control" id="paltform">
                                        <option disabled="disable" selected="" class="string_role_platform">- 选择平台 -</option>
                                        <option value="android">- android -</option>
                                        <option value="ios">- ios -</option>
                                    </select>
                                </div>
                              </div>
                              <div class="col-sm-5 col-sm-offset-1">
                                <div class="form-group">
                                    <label class="string_role_serverId">区服</label>
                                    <select class="form-control" id="server">
                                        <option disabled="disable" selected="" class="string_role_serverId">- 选择区服 -</option>
                                    </select>
                                </div>
                              </div>
                              <div class="col-sm-5 col-sm-offset-1">
                                <div class="form-group">
                                    <label class="string_role_name">角色名</label>
                                    <input type="text" class="form-control" id="role_name" disabled>
                                </div>
                              </div>
                              <div class="col-sm-5 col-sm-offset-1">
                                <div class="form-group">
                                    <label class="string_role_id">角色ID</label>
                                    <input type="text" class="form-control" id="role_id" disabled>
                                </div>
                              </div>
                              <div class="col-sm-5 col-sm-offset-1">
                                <div class="form-group">
                                    <label class="string_role_level">角色等级</label>
                                    <input type="text" class="form-control" id="role_level" disabled>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="tab-pane" id="rechargeAmount">
                            <h5 class="info-text string_nav_recharge_title">充值档位</h5>
                            <div class="row">
                              <div class="col-sm-11 col-sm-offset-1">
                                <div class="form-group">
                                  <label class="string_nav_recharge_title">充值档位</label>
                                  <select class="form-control" id="recharge">
                                      <option disabled="disable" selected="">- 选择充值档位 -</option>
                                  </select>
                                </div>
                              </div>
                              <div class="col-sm-5 col-sm-offset-1">
                                <div class="form-group">
                                    <label class="string_recharge_TWD">台币价格</label>
                                    <input type="text" class="form-control" id="recharge_TWD" disabled>
                                </div>
                              </div>
                              <div class="col-sm-5 col-sm-offset-1">
                                <div class="form-group">
                                    <label class="string_recharge_goods">灵玉数量</label>
                                    <input type="text" class="form-control" id="recharge_goods" disabled>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="tab-pane" id="rechargeType">
                            <!-- <h5 class="info-text string_nav_recharge_type_title">充值方式</h5> -->
                            <!-- <div class="col-sm-12" id="recharge_iframe">
                            </div> -->

                            <!-- <h5 class="info-text string_nav_recharge_type_title">充值方式</h5>
                            <div class="row">
                              <div class="col-sm-12">
                                <div class="col-sm-4">
                                  <div class="choice" data-toggle="wizard-checkbox">
                                        <div class="card card-checkboxes card-hover-effect">
                                            <i class="ti-home"></i>
                                              <p id="home">Home</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                  <div class="choice" data-toggle="wizard-checkbox">
                                        <div class="card card-checkboxes card-hover-effect">
                                            <i class="ti-package"></i>
                                              <p id="Apartment">Apartment</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                  <div class="choice active" data-toggle="wizard-checkbox">
                                        <div class="card card-checkboxes card-hover-effect">
                                            <i class="ti-credit-card"></i>
                                              <p id="Mycard">Mycard</p>
                                        </div>
                                    </div>
                                </div>
                              </div>
                            </div> -->
                          </div>
                        </div>
                        <div class="wizard-footer">
                          <div class="pull-right">
                            <input type="button" class="btn btn-next btn-fill btn-success btn-wd" name="next" value="Next" style="" id="next">
                            <input type="button" class="btn btn-finish btn-fill btn-success btn-wd" name="finish" value="Finish" style="display: none;" id="finish">
                          </div>
                          <div class="pull-left">
                            <input type="button" class="btn btn-previous btn-default btn-wd disabled" name="previous" value="Previous" id="previous">
                          </div>
                        <div class="clearfix"></div>
                      </div>
                      </form>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="listblock_list main_width" id="placeholder_listblock" style="padding: 0 0 0 0;">
              
          </div>
        </main>
        <footer id="footer"></footer>
    </div>
  </body>
</html>
